<template>
  <div>
    <div class="carousel">
      <el-carousel height="410px" arrow="always">
        <el-carousel-item v-for="(item,index) in carouselitem.length" :key="index">
          <a href="#">
            <img :src="carouselitem[index]" style="width:100%;height:410px;" alt />
          </a>
        </el-carousel-item>
      </el-carousel>
      <Navigation></Navigation>
    </div>
  </div>
</template>

<script>
import Navigation from "../../components/Show/LeftNavigat";

export default {
  components: {
    Navigation,
  },
  data() {
    return {
      carouselitem: [
        "https://res.vmallres.com/pimages//pages/picImages/91862763859516726819.jpg",
        "https://res.vmallres.com/pimages//pages/picImages/09437023459512073490.jpg",
        "https://res.vmallres.com/pimages//pages/picImages/03945327659512354930.jpg",
        "https://res0.vmallres.com/shopdc/pic/d58926f5-a115-4c04-b53b-402cf91655e2.jpg",
      ],
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.carousel {
  overflow-y: hidden;
  position: relative;
}

/deep/.el-carousel__arrow {
  height: 50px;
  width: 50px;
  font-size: 26px;
  border-radius: 50%;
  outline: none;
  background-color: rgba(192, 27, 81, 0.11);
  z-index: 8;
}
/deep/.el-carousel__arrow--left {
  left: 25%;
}
/deep/.el-carousel__arrow--right {
  right: 20%;
}
/deep/.el-carousel__button {
  border-radius: 50%;
  width: 24px;
  height: 24px;
}
/deep/.el-carousel__indicators--horizontal {
  bottom: 15px;
  left: 60%;
}
.el-carousel__container {
  // top: 60px;
}
</style>